<template>
  <div id="WW">
    <div id="nav">
      <el-container>
        <el-main>
          <div class="ww-container">
            <el-row :gutter="20">
              <!-- 右侧导航栏部分 -->
              <el-col :span="3">
                <div class="grid-content bg-purple" style="width: 100px;height: 123px;">
                  <ul class="text-center">
                    <li>
                      <a @click="OnRm">热门</a>
                    </li>
                    <li>
                      <a href>关注</a>
                    </li>
                    <li class="li-one">
                      <a href class="li-one">微文</a>
                    </li>
                  </ul>
                </div>
              </el-col>
              <!-- 中间部分循环滚动 -->
              <el-col :span="16">
                <div class="grid-content bg-purple">
                  <div>
                    <ul class="ww-list-top">
                      <li>
                        <a href class="active">微文</a>
                      </li>
                    </ul>
                    <!-- 中间相同部分 -->
                    <ul class="ww-list">
                      <li class="ww-wwitem">
                        <!-- 头像以及关注按钮 -->
                        <div class="ww-wwitem-top">
                          <!-- 用户头像 -->
                          <div class="wwitem-tx">
                            <img src="../assets/image/ww-tx.jpeg" alt />
                          </div>
                          <!-- 用户名称 -->
                          <div class="wwitem-mc">
                            <p>
                              <span>秋悦</span>
                            </p>
                            <p class="ww-time">1分钟前</p>
                          </div>
                          <!-- 关注 -->
                          <div class="gz-wwitem">
                            <button class="wwitem-gz">关注</button>
                            <a href>...</a>
                          </div>
                        </div>
                        <!-- 中间部分 -->
                        <div class="ww-wwitem-center">
                          <p>瀑布来了，大家慌张吗？</p>
                        </div>
                        <!-- 底部部分 -->
                        <div class="ww-wwitem-bottom">
                          <div class="ww-wwitem-bottom-right">
                            <button>
                              <img src="../assets/image/ding.png" alt />
                            </button>
                            <p>11</p>
                            <button>
                              <img src="../assets/image/la.png" alt />
                            </button>
                            <button class="button-right">
                              <img src="../assets/image/diandiandian.png" alt />
                              <span>0</span>
                            </button>
                          </div>
                        </div>
                      </li>
                      <li class="ww-wwitem">
                        <!-- 头像以及关注按钮 -->
                        <div class="ww-wwitem-top">
                          <!-- 用户头像 -->
                          <div class="wwitem-tx">
                            <img src="../assets/image/ww-tx.jpeg" alt />
                          </div>
                          <!-- 用户名称 -->
                          <div class="wwitem-mc">
                            <p>
                              <span>秋悦</span>
                            </p>
                            <p class="ww-time">1分钟前</p>
                          </div>
                          <!-- 关注 -->
                          <div class="gz-wwitem">
                            <button class="wwitem-gz">关注</button>
                            <a href>...</a>
                          </div>
                        </div>
                        <!-- 中间部分 -->
                        <div class="ww-wwitem-center">
                          <p>瀑布来了，大家慌张吗？</p>
                        </div>
                        <!-- 底部部分 -->
                        <div class="ww-wwitem-bottom">
                          <div class="ww-wwitem-bottom-right">
                            <button>
                              <img src="../assets/image/ding.png" alt />
                            </button>
                            <p>11</p>
                            <button>
                              <img src="../assets/image/la.png" alt />
                            </button>
                            <button class="button-right">
                              <img src="../assets/image/diandiandian.png" alt />
                              <span>0</span>
                            </button>
                          </div>
                        </div>
                      </li>
                      <li class="ww-wwitem">
                        <!-- 头像以及关注按钮 -->
                        <div class="ww-wwitem-top">
                          <!-- 用户头像 -->
                          <div class="wwitem-tx">
                            <img src="../assets/image/ww-tx.jpeg" alt />
                          </div>
                          <!-- 用户名称 -->
                          <div class="wwitem-mc">
                            <p>
                              <span>秋悦</span>
                            </p>
                            <p class="ww-time">1分钟前</p>
                          </div>
                          <!-- 关注 -->
                          <div class="gz-wwitem">
                            <button class="wwitem-gz">关注</button>
                            <a href>...</a>
                          </div>
                        </div>
                        <!-- 中间部分 -->
                        <div class="ww-wwitem-center">
                          <p>瀑布来了，大家慌张吗？</p>
                        </div>
                        <!-- 底部部分 -->
                        <div class="ww-wwitem-bottom">
                          <div class="ww-wwitem-bottom-right">
                            <button>
                              <img src="../assets/image/ding.png" alt />
                            </button>
                            <p>11</p>
                            <button>
                              <img src="../assets/image/la.png" alt />
                            </button>
                            <button class="button-right">
                              <img src="../assets/image/diandiandian.png" alt />
                              <span>0</span>
                            </button>
                          </div>
                        </div>
                      </li>
                      <li class="ww-wwitem">
                        <!-- 头像以及关注按钮 -->
                        <div class="ww-wwitem-top">
                          <!-- 用户头像 -->
                          <div class="wwitem-tx">
                            <img src="../assets/image/ww-tx.jpeg" alt />
                          </div>
                          <!-- 用户名称 -->
                          <div class="wwitem-mc">
                            <p>
                              <span>秋悦</span>
                            </p>
                            <p class="ww-time">1分钟前</p>
                          </div>
                          <!-- 关注 -->
                          <div class="gz-wwitem">
                            <button class="wwitem-gz">关注</button>
                            <a href>...</a>
                          </div>
                        </div>
                        <!-- 中间部分 -->
                        <div class="ww-wwitem-center">
                          <p>瀑布来了，大家慌张吗？</p>
                        </div>
                        <!-- 底部部分 -->
                        <div class="ww-wwitem-bottom">
                          <div class="ww-wwitem-bottom-right">
                            <button>
                              <img src="../assets/image/ding.png" alt />
                            </button>
                            <p>11</p>
                            <button>
                              <img src="../assets/image/la.png" alt />
                            </button>
                            <button class="button-right">
                              <img src="../assets/image/diandiandian.png" alt />
                              <span>0</span>
                            </button>
                          </div>
                        </div>
                      </li>
                      <li class="ww-wwitem">
                        <!-- 头像以及关注按钮 -->
                        <div class="ww-wwitem-top">
                          <!-- 用户头像 -->
                          <div class="wwitem-tx">
                            <img src="../assets/image/ww-tx.jpeg" alt />
                          </div>
                          <!-- 用户名称 -->
                          <div class="wwitem-mc">
                            <p>
                              <span>秋悦</span>
                            </p>
                            <p class="ww-time">1分钟前</p>
                          </div>
                          <!-- 关注 -->
                          <div class="gz-wwitem">
                            <button class="wwitem-gz">关注</button>
                            <a href>...</a>
                          </div>
                        </div>
                        <!-- 中间部分 -->
                        <div class="ww-wwitem-center">
                          <p>瀑布来了，大家慌张吗？</p>
                        </div>
                        <!-- 底部部分 -->
                        <div class="ww-wwitem-bottom">
                          <div class="ww-wwitem-bottom-right">
                            <button>
                              <img src="../assets/image/ding.png" alt />
                            </button>
                            <p>11</p>
                            <button>
                              <img src="../assets/image/la.png" alt />
                            </button>
                            <button class="button-right">
                              <img src="../assets/image/diandiandian.png" alt />
                              <span>0</span>
                            </button>
                          </div>
                        </div>
                      </li>
                      <li class="ww-wwitem">
                        <!-- 头像以及关注按钮 -->
                        <div class="ww-wwitem-top">
                          <!-- 用户头像 -->
                          <div class="wwitem-tx">
                            <img src="../assets/image/ww-tx.jpeg" alt />
                          </div>
                          <!-- 用户名称 -->
                          <div class="wwitem-mc">
                            <p>
                              <span>秋悦</span>
                            </p>
                            <p class="ww-time">1分钟前</p>
                          </div>
                          <!-- 关注 -->
                          <div class="gz-wwitem">
                            <button class="wwitem-gz">关注</button>
                            <a href>...</a>
                          </div>
                        </div>
                        <!-- 中间部分 -->
                        <div class="ww-wwitem-center">
                          <p>瀑布来了，大家慌张吗？</p>
                        </div>
                        <!-- 底部部分 -->
                        <div class="ww-wwitem-bottom">
                          <div class="ww-wwitem-bottom-right">
                            <button>
                              <img src="../assets/image/ding.png" alt />
                            </button>
                            <p>11</p>
                            <button>
                              <img src="../assets/image/la.png" alt />
                            </button>
                            <button class="button-right">
                              <img src="../assets/image/diandiandian.png" alt />
                              <span>0</span>
                            </button>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </el-col>
              <!-- 右侧部分 -->
              <el-col :span="3">
                <div class="grid-content bg-purple" style="margin-left: -20px;">
                  <a href>
                    <img
                      src="../assets/image/notice.e62cc7bd.png"
                      style="width: 285px;height: 80px;margin-bottom: 20px;"
                      alt
                    />
                    <img
                      src="../assets/image/new-to-boot-icon.03b9591d.png"
                      style="width: 285px;height: 60px;margin-bottom: 20px;"
                      alt
                    />
                    <img
                      src="../assets/image/bihu-e.452c8664.jpg"
                      style="width: 285px;height: 141px;margin-bottom: 20px;"
                      alt
                    />
                  </a>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    OnRm () {
      this.$router.push('/')
    }
  }
}
</script>
<style scoped>
.ww-container {
  width: 1170px;
  height: 100%;
  margin: 0 auto;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
/* .bg-purple {
  background: #d3dce6;
} */
.bg-purple-light {
  background: #e5e9f2;
}
/* .grid-content {
  min-height: 36px;
} */
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.text-center {
  text-align: center;
}
.text-center .li-one {
  border-radius: 2px;
  background: #007bff;
  color: #fff;
}
.text-center li a {
  display: block;
  padding: 10px 0;
  border-radius: 2px;
  background: transparent;
  color: #3b4651;
  margin-bottom: 2px;
  font-size: 14px;
  text-decoration: none;
}

.text-center li a:hover {
  transition: all 0.5s;
  background: #007bff;
  color: #fff;
}
.ww-list-top {
  width: 785px;
  background: #fff;
  margin-right: 0;
  margin-left: -35px;
  height: 39px;
  line-height: 39px;
}
.ww-list-top li {
  float: left;
  padding: 0 0 0 23px;
}
.ww-list-top li .active {
  transition: all 1.5s;
  color: #007bff;
  border-bottom-color: #007bff;
}
.ww-list-top li a {
  display: inline-block;
  line-height: 39px;
  width: 60px;
  height: 37px;
  text-align: center;
  color: #bcc7d7;
  text-decoration: none;
  font-size: 16px;
  border-bottom: 3px solid #fff;
}
.ait-list {
  width: 815px;
  height: 100%;
  transition: all 0.5s;
  margin-left: -35px;
}
.ait-li {
  margin-top: 1px;
  background: #fff;
  padding: 15px 32px 15px 30px;
}
.el-col-3 {
  margin-left: -15px;
}
.ww-list {
  width: 785px;
  min-height: 600px;
  margin-left: -35px;
}
.ww-wwitem {
  margin-top: 1px;
  background: #fff;
  padding: 15px 32px 5px 30px;
}
.ww-wwitem .ww-wwitem-top {
  position: relative;
  height: 40px;
  display: flex;
  margin-bottom: 15px;
}
.ww-wwitem .ww-wwitem-top .wwitem-tx img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.ww-wwitem .ww-wwitem-top .wwitem-mc {
  width: 605px;
  margin-top: -15px;
  margin-left: 10px;
}
.ww-wwitem .ww-wwitem-top .wwitem-mc p {
  font-size: 14px;
  color: #5a6169;
  margin-bottom: -10px;
}
.ww-wwitem .ww-wwitem-top .wwitem-mc .ww-time {
  font-size: 12px;
  color: #ccc;
}
.ww-wwitem .ww-wwitem-top .gz-wwitem .wwitem-gz {
  cursor: pointer;
  font-size: 12px;
  color: #5187ff;
  background-color: white;
  line-height: 16px;
  padding: 4px 8px;
  border: 1px solid rgba(81, 135, 255, 0.32);
  border-radius: 6px;
}
.ww-wwitem .ww-wwitem-top .gz-wwitem a {
  padding: 6px 0 6px 11px;
  font-size: 20px;
  color: #9b9b9b;
}
.ww-wwitem .ww-wwitem-center {
  cursor: pointer;
  margin-bottom: 16px;
}
.ww-wwitem .ww-wwitem-center p {
  color: #666;
  font-size: 14px;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right {
  margin-left: 560px;
  display: flex;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right button img {
  width: 20px;
  height: 20px;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right button {
  text-align: center;
  cursor: pointer;
  border: transparent;
  background-color: white;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right p {
  width: 55px;
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-left: -7px;
  margin-right: -7px;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right .button-right {
  position: relative;
  left: 30px;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right .button-right img {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
.ww-wwitem .ww-wwitem-bottom .ww-wwitem-bottom-right .button-right span {
  font-size: 12px;
  color: #999;
  position: relative;
  top: -3px;
}
</style>
